<template>
  <div class="x-aside-template background">
    <div class="title">背景</div>
    <div class="pure">
      <ul>
        <li>
          <div class="item">
            <el-color-picker v-model="color" color-format="hex" popper-class="x-aside-color" @active-change="onActiveChange" />
          </div>
        </li>
        <li v-for="item in pure" :key="item">
          <div class="item" :style="{ background: item }" @click="onActiveChange(item)" />
        </li>
      </ul>
    </div>
    <div class="list">
      <ul>
        <li v-for="item in pic" :key="item.src"><el-image :src="item.src + '?x-oss-process=image/resize,w_176,h_176,m_fill/interlace,1,image/format,webp'" @click="onSetBackPic(item)" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'XAsideBackground',
  components: {},
  props: {},
  data () {
    return {
      color: '#fa5a53',
      pic: [{
        src: 'https://st0.dancf.com/csc/310/materials/0/20190914-165039-699e.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/materials/0/20190914-165330-8204.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-213113-bc56.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-222925-79e8.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-223156-ce0b.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190514-193203-1401.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-223453-e943.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-223218-572b.png',
        color: '#FFF'
      }],
      pure: ['#000000', '#737373', '#D9D9D9', '#FFFFFF', '#A82B2A', '#A86F0E', '#528725', '#191F8B', '#49188B', '#E65354', '#FFD935', '#70BC59', '#607BF4']
    }
  },
  computed: {
    ...mapState({
      layouts: state => state['design'].layouts
    }),
    // 背景
    background () {
      return this.layouts.background
    }
  },
  watch: {},
  created () {
    this.color = this.background.color || '#fa5a53'
  },
  methods: {
    onActiveChange (color) {
      this.$store.dispatch('design/setData', {
        'background.color': color,
        'background.image': null
      }).then(() => {
        this.color = color
      })
    },
    // 选择背景图片
    onSetBackPic (item) {
      this.$store.dispatch('design/setData', {
        'background.color': item.color,
        'background.image': item.src
      })
    }
  }
}
</script>

<style lang="less">
  .x-aside-template.background{
    display: flex; flex-direction: column; height: 100%;
    .pure{
      padding-bottom: 20px;
      ul{ display: flex; flex-wrap: wrap;}
      li{
        padding: 2px;
        .item{ width: 40px; height: 40px; border: 1px solid #f1f1f1; border-radius: 3px; overflow: hidden;}
        .el-color-picker__trigger,
        .el-color-picker{ width: 38px; height: 38px;}
        .el-color-picker__trigger{ border: 0; padding: 0;}
        .el-color-picker__color{ border: 0;}
        .el-icon-arrow-down{ display: none;}
        .el-color-picker__color-inner{
          background: url() center center !important; background-size: cover;
        }
      }
    }
    .list {
      ul{
        display: flex; flex-wrap: wrap;
        .el-image{ display: block; cursor: pointer;}
        li{ width: 25%; padding: 2px;}
      }
    }
  }
  .x-aside-color{
    .el-color-predefine__color-selector{
      div{ border: 1px solid #f1f1f1;}
    }
    .el-color-dropdown__btns{
      .el-button{ display: none;}
    }
  }
</style>
